<template>
   <div class="activity_detail activity">
      <navbar>{{ detail.title }}</navbar>

     <div class="wrapper">
       <div class="content">
         <img class="banner" :src="detail.img">
         <div class="title">
           <h2 class="vlc-nowrap">{{ detail.title }}</h2>
           <h3>
             <span class="vlc-nowrap">{{ detail.subtitle }}</span>
             <i :class="detail.status | ac_status">{{ detail.status | ac_status_txt }}</i>
           </h3>
         </div>
         <div class="activity-info wrap">
           <ul>
             <li class="mx-1px-bottom">
               <div class="liIn">
                 <span class="icon icon1"></span>
                 <span>{{ detail.starts_at | time(detail.ends_at)}}</span>
               </div>
             </li>
             <li class="mx-1px-bottom" @click="goMap">
               <div class="liIn">
                 <span class="icon icon2"></span>
                 <span class="forwardIcon">{{ detail.address }}</span>
               </div>
             </li>
             <li>
               <div class="liIn">
                 <span class="icon icon3"></span>
                 <span>已报名{{ detail.member_count }}人<!-- / {{ detail.member_limit | member_limit }}--></span>
               </div>
             </li>
           </ul>
         </div>
         <div class="wrap">
           <h2 class="title vmc-1px-bottom">课程简介</h2>
           <p class="txt" v-html="detail.content"></p>
         </div>
         <div class="wrap" v-if="detail.coach">
           <h2 class="title mx-1px-bottom">教练简介</h2>
           <div class="coach-intro">
             <div class="portrait" :style="{backgroundImage:'url('+detail.coach.avatar+')'}"></div>
             <h2>{{ detail.coach.nick_name }}</h2>
             <p>{{ detail.coach.title }}</p>
           </div>
           <p class="txt" v-html="detail.coach.describe"></p>
         </div>
       </div>
       <div class="bottomBar" v-if="!isCoach">
         <button :class="likeClass" @click="like"></button>
         <button class="share" @click="shareTip=!shareTip">分享</button>
         <div class="btnWrap">
           <button class="status" :class="statusClass" :disabled="statusDisabled" @click="jump('activity_apply')">{{ statusTxt }}</button>
         </div>
       </div>

       <div class="bottomBar bottomBar_coach" v-if="isCoach">
         <button class="share" @click="shareTip=!shareTip">分享</button>
         <div class="btnWrap">
           <button class="status blue" @click="jump('sign_list')">查看报名详情</button>
         </div>
       </div>

     </div>
     <div class="share-tip" v-show="shareTip" @click="shareTip=!shareTip"><div></div></div>
   </div>
</template>
<script type="text/ecmascript-6">
  import js from '../../../../cores/registration/activity_detail.vue';
  export default {
    extends: js
  }
</script>
<style rel="stylesheet/less" lang="less">
  @import "../../../../styles/ot.less";
</style>

